<template>
    <div>
        <!-- 打印设置 -->
        <div class="all-container">
            <el-row>
                <el-col :span="24">
                    <!-- 标题栏 -->
                    <el-row class="title-container">
                        <el-col :span="24"><div class="print-title">模板车型</div></el-col>
                    </el-row>
                    <el-row class="print-type">
                        <el-col :span="24"><div class="choose-title">客运车票</div></el-col>
                    </el-row>
                    <!-- 功能栏 -->
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='添加'">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="modWin=true;winTitle='修改'">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="del">删除</div>
                        </el-col>
                    </el-row>
                    <!-- 数据表格栏 -->
                    <avue-crud :data="printList.data" :option="printList.option" @current-row-change="rowChange" :page="printList.page" @current-change="printPage"></avue-crud>
                    <!-- 修改弹窗 -->
                    <div v-if="modWin" class="addModal">
                    <!-- 标题栏 -->
                    <el-row class="add-title">
                        <div class="closeWin" @click="closeModWin">X</div>
                        <el-col :span="24">
                            <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                        </el-col>
                    </el-row>
                    <!-- 表单栏 -->
                    <el-row class="form-container">
                        <el-col :span="24">
                            <!-- 第一行 -->
                            <el-row class="org-rows">
                                <el-col :span="24">
                                    <div class="lf choose-title org-title">打印机名</div>
                                    <el-input v-model="printName" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input>
                                    <div class="lf choose-title org-title">模板类型</div>
                                    <el-input v-model="modualType" placeholder="" size="mini" style="width:140px;" class="lf choose-input org-input"></el-input>
                                </el-col>
                            </el-row>
                            <!-- 第二行 -->
                            <el-row class="org-rows">
                                <el-col :span="24">
                                    <div class="lf choose-title org-title">打印方式</div>
                                    <!-- <el-input v-model="resourName" placeholder="" size="mini" style="width:160px;" class="lf choose-input org-input"></el-input> -->
                                    <el-radio v-model="printType" label="1">ESC/POS指令打印</el-radio>
                                    <el-radio v-model="printType" label="2">驱动打印</el-radio>
                                </el-col>
                            </el-row>
                            <!-- 第三行 -->
                            <el-row class="org-rows" v-show="printType==1">
                                <el-col :span="24">
                                    <div class="lf choose-title">打印格式</div>
                                    <!-- 左侧 -->
                                    <div class="lf left-container"></div>
                                    <!-- 右侧 -->
                                    <div class="lf right-container">
                                        <el-row class="print-text">
                                            <el-col :span="24">双击添加打印样式</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose1" @dblclick.native="pushTL(1)">倍宽字体</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose2" @dblclick.native="pushTL(2)">双倍字体</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose3" @dblclick.native="pushTL(3)">走纸调整</el-col>
                                        </el-row>
                                        <el-row class="print-text">
                                            <el-col :span="24">双击添加打印项目</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose4" @dblclick.native="pushTL(4)">车票号</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose5" @dblclick.native="pushTL(5)">条码</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose6" @dblclick.native="pushTL(6)">条码号</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose7" @dblclick.native="pushTL(7)">座位号</el-col>
                                        </el-row>
                                        <el-row class="detail-text">
                                            <el-col :span="24" class="choose-title text-choose8" @dblclick.native="pushTL(8)">班次号</el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                            <!-- 第四行 -->
                            <el-row class="org-rows" v-show="printType==1">
                                <el-col :span="24">
                                    <div class="lf choose-title res-title">走纸数量</div>
                                    <div class="lf dataSet-container">
                                        <el-row class="print-rows">
                                            <el-col :span="24">
                                                <div class="lf choose-title org-title">打印前走纸量:</div>
                                                <el-input v-model="beforeCount" placeholder="" size="mini" style="width:50px;" class="lf choose-input org-input"></el-input>
                                                <div class="lf choose-title print-con">连续打印页间走纸量:</div>
                                                <el-input v-model="conCount" placeholder="" size="mini" style="width:50px;" class="lf choose-input org-input"></el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row>
                                            <el-col :span="24">
                                                <div class="lf choose-title org-title">打印后走纸量:</div>
                                                <el-input v-model="lastCount" placeholder="" size="mini" style="width:50px;" class="lf choose-input org-input"></el-input>
                                                 <div class="lf choose-title print-con remark-text">注:走纸量单位为1/180英寸=0.141毫米</div>
                                            </el-col>
                                        </el-row>
                                        <!-- 按钮 -->
                                        <el-row>
                                            <el-col :span="24">
                                                <button class="check-btn" @click="testPrint" style="width:475px">
                                                <img src="../../assets/imgs/operation_btn_icon_bianji_default.png" alt="" class="btn-img">测 试 打 印</button>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!-- 按钮 -->
                    <button class="check-btn rf" @click="cancelMod">
                    <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                    <button class="check-btn rf" @click="winTitle=='添加'?add():modified()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
                </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
import "../../assets/js/jquery.js"
export default {
  data: function() {
    return {
      printList: {
          page: {
            pageSizes: [10],
            total: 20,
            currentPage: 1,
            pageSize: 10,
            },
          data:[],
          option:{
            highlightCurrentRow:true,
            page:true,
            menu:false,
            align:'center',
            menuAlign:'center',
            column:[
                {
                    label:"打印机名称",
                    prop:"name"
                },
                {
                    label:"打印方式",
                    prop:"type"
                },
            ]
          }
      },
      modWin: false,
      printName: "",
      modualType: "客运车票",
      printType: "1",
      beforeCount: "",
      conCount: "",
      lastCount: "",
      testPrint: "",
      currentRow:"",
      printTL:[],
      winTitle:"test"
    };
  },
  methods: {
      printPage(val){
          this.printList.page.currentPage=val;
          this.getprintList();
      },
    getprintList() {
      this
        .postRequest("/print/tempalate/list",{
            rows:10,
            page:this.printList.page.currentPage
        })
        .then(data => {
            this.printList.page.total=data.data.totalRow;
            this.printList.data=data.data.list;
        });
    },
    refresh() {
      this.getprintList();
    },
    pushTL(n){
        console.log(n);
        switch(n){
            case 1: this.printTL.push("<@开启倍宽字体>");$(".text-choose1").css("background","#00695F");$(".text-choose1").css("color","white");break;
            case 2: this.printTL.push("<@开启双倍字体>");$(".text-choose2").css("background","#00695F");$(".text-choose2").css("color","white");break;
            case 3: this.printTL.push("<@开启走纸调整>");$(".text-choose3").css("background","#00695F");$(".text-choose3").css("color","white");break;
            case 4: this.printTL.push("<:车票号>");$(".text-choose4").css("background","#00695F");$(".text-choose4").css("color","white");break;
            case 5: this.printTL.push("<:条码>");$(".text-choose5").css("background","#00695F");$(".text-choose5").css("color","white");break;
            case 6: this.printTL.push("<:条码号>");$(".text-choose6").css("background","#00695F");$(".text-choose6").css("color","white");break;
            case 7: this.printTL.push("<:座位号>");$(".text-choose7").css("background","#00695F");$(".text-choose7").css("color","white");break;
            case 8: this.printTL.push("<:班次号>");$(".text-choose8").css("background","#00695F");$(".text-choose8").css("color","white");break;
        }
    },
    add() {
      this
        .getRequest(
          "/print/tempalate/add?prnTemplate.id=&prnTemplate.name="+this.printName+"&prnTemplate.type="+this.modualType+"&is_escpos="+this.printType+"&prnTemplate.port=&prnTemplate.exp="+this.printTL.join("")+"&prnTemplate.form_feeding_before="+this.beforeCount+"&prnTemplate.form_feeding_between="+this.conCount+"&prnTemplate.form_feeding_after="+this.lastCount+"&prnTemplate.is_escpos="+this.printType
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getprintList();
            this.modWin=true;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    mod() {
      this.modWin = true;
    },
    closeModWin() {
      this.modWin = false;
    },
    cancelMod() {
      this.modWin = false;
    },
    modified() {
      this
        .getRequest(
         "/print/tempalate/update?prnTemplate.id=&prnTemplate.name="+this.printName+"&prnTemplate.type="+this.modualType+"&is_escpos="+this.printType+"&prnTemplate.port=&prnTemplate.exp="+this.printTL.join("")+"&prnTemplate.form_feeding_before="+this.beforeCount+"&prnTemplate.form_feeding_between="+this.conCount+"&prnTemplate.form_feeding_after="+this.lastCount+"&prnTemplate.is_escpos="+this.printType
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.modWin=false;
            this.getprintList();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    del() {
        this.postRequest("/print/tempalate/del",{
            id:this.currentRow.id
        }).then(data=>{
            if(data.data[0]=="0"){
                this.$message({
                message: data.data[1],
                type: 'success'
                });
                this.getprintList();
            }else{
                this.$message.error(data.data[1]);
            }
        });
    },
    rowChange(val){
        this.currentRow=val;
        this.printName=val.printName;
        this.modualType=val.type;
        this.printType=val.is_escpos?"1":"0";
        this.beforeCount=val.form_feeding_before;
        this.conCount=val.form_feeding_between;
        this.lastCount=val.form_feeding_after;
        if(this.winTitle=='添加'){
            this.printName="";
            this.modualType="客运车票";
            this.printType=1;
            this.beforeCount="";
            this.conCount="";
            this.lastCount="";
        }
    }
  },
  computed: {},
  components:{TableData},
  watch: {
      winTitle(){
          if(this.winTitle=='添加'){
               this.printName="";
                this.modualType="客运车票";
                this.printType=1;
                this.beforeCount="";
                this.conCount="";
                this.lastCount="";
          }
      }
  },
  mounted() {
    console.log("printManage");
    this.getprintList();
    this.$emit("sendActive", "3-2");
  }
};
</script>
<style scoped src="../../assets/css/allManage/printManage.css">
</style>